<script setup>
import { ref } from 'vue'
const spectatorsDialog = ref(false) //观众弹窗
const noticeDialog = ref(false) //支付须知
</script>
<template>
  <div>
    <div class="container">
      <div class="main">
        <div class="row">
          <div class="col">图片</div>
          <div class="col-6">
            <div class="info">
              <div class="info_top">
                <div class="info_title">Cheerleading (flower ball)/Gymnastics (aerobics)</div>
                <div class="info_desc">Based on the on-site conditions</div>
                <div class="info_time">2025.08.15-08.16</div>
              </div>
              <div class="info_price">
                <div class="info_price_title">The first scene 2025-08-15 12:25</div>
                <div class="info_sum"><span>￥</span><span>50.00</span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="card mt-20 p20">
          <div class="text fs-16 ">Dong'an Lake Sports Park Multi functional Gymnasium</div>
          <div class="row">

            <div class="text fs-16 mt-15 c9">Dong'an Lake Sports Park Multi functional Gymnasium</div>
            <div class=""></div>
          </div>
          <div class="row mt-13">
            <div class="row p-10-14 radius-5 align-center block">
              <div class="icon"></div>
              <div class="c26 ml-6">Real name registration is required</div>
            </div>
          </div>
        </div>
        <div class="row mt-42 align-center">
          <div class="text-title">Select spectators</div>
          <div class="text-btn ml-20" @click="spectatorsDialog = true">Add spectators</div>
        </div>
        <div class="list">
          <div class="list_item row align-center">
            <div class="list_item_left">
              <div class="item-title">Zhang San</div>
              <div class="c9 fs-16 mt-15">ID card: 513 ************* 012</div>
              <div class="c9 fs-16 mt-15">Mobile number: 187 ****** 3686</div>
            </div>
            <div class="list_item_ops">
              <input type="checkbox" class="checkbox" />
            </div>
          </div>
        </div>

        <div class="text-title mt-42">Competition Introduction</div>
        <div class="p">The event of this competition is gymnastics (technical/trampoline), which mainly involves
          movements such as somersault, balance, throwing and catching. Based on these movements, a certain form of
          sports competition is completed, emphasizing performance and teamwork, and performed in pairs, threes or
          teams. Trampoline is a competitive sport in which athletes use the rebound of the trampoline to perform
          acrobatic skills in the air. It belongs to a type of gymnastics and is known as "aerial ballet".</div>
        <div class="p">The ticket for this competition is for the second gymnastics (skills/trampoline) competition,
          which will take place on August 8, 2025 from 19:23 to 21:45. The competition includes 6 events, as follows:
        </div>
        <div class="p">(Tip) Women's Doubles - Finals Warm up and Finals: August 8, 2025 19:23-20:43</div>
        <div class="p">(Tip) Women's Doubles - Award Ceremony: 2022-8-8 20:58-21:05</div>
        <div class="p">(Tip) Mixed Doubles - Finals Warm up, Finals: 2022-8-8 20:00-21:23</div>
        <div class="p">(Tip) Mixed Doubles - Award Ceremony: 2022-8-8 21:35-21:45</div>
        <div class="p">(Trampoline) Men's synchronized doubles final: 2022-8-8 19:45-20:15</div>
        <div class="p">(Trampoline) Men's synchronized doubles - Award ceremony: 2022-8-8 20:20-20:30</div>
      </div>
    </div>
    <div style="height: 164px;background-color: #f9f9f9;"></div>
    <div class="footer">
      <div class="footer-main row align-center column">
        <div style="flex: 1;"></div>
        <div class="row align-center">
          <div class="fs-16 c9 mr-22">Please confirm that your information is filled in correctly</div>
          <div class="btn" @click="noticeDialog = true">Submit Now</div>
        </div>
      </div>
    </div>
    <div class="mask" v-if="spectatorsDialog">
      <div class="mask_box">
        <div class="mask_body">
          <div class="mask_body_header align-center row p-44-44">
            <div class="title">Add spectators</div>
            <div class="square-close-btn" @click="spectatorsDialog = false"></div>
          </div>
          <div class="mask_form_item p-44 mb-30">
            <div class="label">Name</div>
            <div><input type="text" style="width: 480px;" placeholder="Enter name"></div>
          </div>
          <div class="mask_form_item p-44 mb-30">
            <div class="label">ID number</div>
            <div class="row align-center">
              <select class="custom-select">
                <option value="">Select Id</option>
                <option value="1">Card Id</option>
              </select>
              <input class="w350 ml-8" type="text" placeholder="Enter ID number">
            </div>
          </div>
          <div class="mask_form_item p-44 ">
            <div class="label">Contact Information</div>
            <div class="row align-center">
              <select class="custom-select">
                <option value="">Tel/E-mail</option>
                <option value="1">Tel</option>
                <option value="2">E-mail</option>
              </select>
              <input class="w350 ml-8" type="text" placeholder="Enter your phone number">
            </div>
          </div>
          <div class="args p-44 mt-30">
            <input class="checkbox" type="checkbox" />
            <span style="margin-left: 10px;">I have read the </span>
            <span style="color: #255FF1;cursor: pointer;">'Real Name Notice'</span>
          </div>
          <div class="p-44 mt-48">
            <div class="mask_btn">SURE</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mask" v-if="noticeDialog">
      <div class="mask_box">
        <div class="mask_body w1000">
          <div class="mask_body_header align-center row" style="padding: 30px;">
            <div class="title" style="font-size: 24px;">Ticket Purchase Notice</div>
            <div class="square-close-btn" @click="noticeDialog = false"></div>
          </div>
          <div class="content">
            <div style="background: #F5F9FC;border-radius: 6px;padding: 30px;min-height: 500px;">
              <p class="p-10">This notice is the complete version of the 2025 12th World Games Ticket Purchase and Use
                Notice formulated by the 2025 12th World Games Executive Committee. Anyone who purchases, holds or uses
                the Chengdu World Games ticket is deemed to have read, understood, accepted and agreed to abide by all
                the terms of this notice.</p>
              <p class="p-10">I. Definition</p>
              <p class="p-10">Unless otherwise agreed in this notice, the definitions of the terms used in this notice
                are as follows:</p>
              <p class="p-10">(1) Chengdu World Games: refers to the 12th World Games in 2025</p>
              <p class="p-10">(2) Chengdu World Games Executive Committee: refers to the Executive Committee of the 12th
                World Games in 2025. International World Games Association: refers to the International World Games
                Association.</p>
            </div>
          </div>
          <div class="row align-center" style="justify-content: center;margin-top: 40px;">
            <div class="btn_item" @click="noticeDialog = false"
              style="border: 1px solid #B4BEC7;background: #FFFFFF;color: #666666;">Cancel</div>
            <div class="btn_item" style="margin-left: 20px;background: #255FF1;color: #FFFFFF;">Already understood</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  background: #f9f9f9;
  border-radius: 8px;
}

.container {
  background: #f9f9f9;
}

.main {
  box-sizing: border-box;
  padding: 24px;
  width: 1200px;
  margin: 0 auto;
  background: #fff;
}



.info {
  display: flex;
  flex-direction: column;

  &_title {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #272727;
  }

  &_desc {
    margin-top: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #999999;
  }

  &_time {
    margin-top: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #4d4d4d;
  }

  &_price {
    margin-top: 130px;
  }

  &_price_title {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 20px;
    color: #262626;
  }

  &_sum {
    margin-top: 20px;
    display: flex;
    align-items: flex-end;
    color: red;
    font-size: 20px;

    span:nth-of-type(1) {
      font-size: 14px;
    }
  }
}

.row {
  display: flex;
}

.col {
  width: 568px;
  height: 320px;
  background: #f1f3f5;
  border-radius: 8px;
}

.col-6 {
  box-sizing: border-box;
  flex: 1;
  height: 320px;
  padding-left: 24px;
}

.mt-20 {
  margin-top: 20px;
}

.p20 {
  box-sizing: border-box;
  padding: 20px;
}

.text {
  font-family: Source Han Sans CN;
  font-weight: 400;

  color: #262626;
}

.mt-15 {
  margin-top: 15px;
}

.fs-16 {
  font-size: 16px;
}

.c9 {
  color: #999999;
}

.mt-13 {
  margin-top: 13px;

}

.inline-block {
  display: inline-block;
  background-color: #fff;
}

.radius-5 {
  border-radius: 5px;
}

.c26 {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #262626;
}

.ml-6 {
  margin-left: 6px;
}

.p-10-14 {
  padding: 10px 14px;
}

.icon {
  width: 16px;
  height: 16px;
  background: url(/static/ok.webp) no-repeat;
  background-size: 100%;
}

.align-center {
  display: flex;
  align-items: center;
}

.block {
  background: #fff;
}

.mt-42 {
  margin-top: 42px;
}

.text-title {
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 20px;
  color: #262626;
}

.text-btn {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #2660EF;
  cursor: pointer;
}

.ml-20 {
  margin-left: 20px;
}

.p {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #262626;
  margin-top: 40px;
}

.list {
  margin-top: 20px;

  &_item {
    padding: 22px;
    width: 568px;
    background: #F9F9F9;
    border-radius: 8px;

    &_left {
      flex: 1;
    }
  }
}

.footer {
  height: 110px;
  width: 100%;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1;

  &-main {
    height: 100%;
    width: 1200px;
    margin: 0 auto;
  }
}

.btn {
  width: 260px;
  height: 62px;
  background: #FF460D;
  border-radius: 10px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  line-height: 62px;
  cursor: pointer;
}

.mr-22 {
  margin-right: 22px;
}

.basic-select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

/* 自定义样式下拉框 */
.custom-select {
  box-sizing: border-box;
  padding: 0 12px;
  width: 120px;
  height: 44px;
  background: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #E6EBF0;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #999999;
  /* 移除默认箭头 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* 添加自定义箭头 */
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

/* 鼠标悬停和聚焦状态 */
.custom-select:hover,
.custom-select:focus {
  border-color: #0056b3;
  outline: none;
}

.mask {
  z-index: 999;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  // background: #000000;
  // opacity: 0.4;
  background: rgba($color: #000000, $alpha: 0.4);

  &_box {
    height: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &_body {
    width: 570px;
    background: #FFFFFF;
    border-radius: 20px;
    padding-bottom: 58px;
  }
}

.cl000 {
  color: #000000;
}

.square-close-btn {
  width: 20px;
  height: 20px;
  position: relative;
  cursor: pointer;
}

.square-close-btn::before,
.square-close-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 2px;
  background-color: #000;
}

.square-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.square-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.title {
  flex: 1;
  text-align: center;
}

.p-44-44 {
  padding: 40px 44px;
}

.p-44 {
  padding: 0 44px;
}

.mb-30 {
  margin-bottom: 30px;
}

input {
  width: 390px;
  padding: 0 10px;
  height: 44px;
  line-height: 44px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #e6ebf0;

  //聚焦
  &:focus {
    outline: 1px solid #255ff1;
  }
}

input::placeholder {
  font-weight: 400;
  font-size: 16px;
  color: #999999;
}

.w350 {
  width: 350px !important;
}

.ml-8 {
  margin-left: 8px;
}

.label {
  position: relative;
  margin-bottom: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 16px;
  color: #262626;
  text-indent: -10px;
  margin-left: 18px;
}

.label::before {
  position: absolute;
  content: "*";
  color: red;
}

.checkbox {
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 5px;
  border: 1px solid #999999;

  &:focus {
    outline: none;
    border-radius: 5px;
    border: 1px solid #999999;
  }
}

.args {
  display: flex;
  align-items: center;

  span {
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
  }
}

.mt-30 {
  margin-top: 30px;
}

.mask_btn {
  height: 52px;
  background: #255FF1;
  border-radius: 5px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
  line-height: 52px;
  cursor: pointer;
}

.mt-48 {
  margin-top: 48px;
}

.w1000 {
  width: 1000px;
}

.content {
  padding: 0 30px;
}

.p-10 {
  margin-top: 10px;
}

.btn_item {
  width: 260px;
  height: 62px;
  border-radius: 10px;
  line-height: 62px;
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  cursor: pointer;
}
</style>
